<template>
  <div class="myapp">
      <HmHeader />
      <aaa />
      <HmFooter />
      <mydiv />
  </div>
</template>

<script>
// 组件使用的三部曲：  1. 导入 2.注册 3. 使用   
// 我们想要导入组件，使用es模块化规范，名称尽量和我们 组件的名称保持一致
import HmHeader from './components/HmHeader.vue'
import HmMain from './components/HmMain.vue'
import HmFooter from './components/HmFooter.vue'
import mydiv from './components/BFoot.vue'

export default {
  components: {
    // HmHeader: HmHeader  这个组件就和我们的标签 div span 一模一样
    HmHeader,
    aaa: HmMain,
    HmFooter,
    mydiv
  }
}
</script>

<style>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.myapp {
  display: flex;
  flex-direction: column;
  height: 100%;
}
</style>